<template>
    <div>
        <!-- <el-carousel indicator-position="none" style="height: 400px;">
            <el-carousel-item v-for="(item,index) in bannerList" :key="index" style="height: 400px;"> -->
        <!-- <div style="max-width: 1980px;max-height: 380px;margin: 0 auto;">
                    <img style="width: 100%;max-height: 380px;" :src="bannerList[0].imgUrl" />
                </div> -->
        <!-- </el-carousel-item>
        </el-carousel> -->
        <div style="display: flex;flex-direction: column;align-items: start;background-color: #f9e79f;">
            <el-row>
                <el-col :span="24">
                    <section style="height: 34px;display: flex;justify-content: flex-start;
                    align-items: center;width: 1000px;margin: 0 auto;">
                        <div>
                            <img style="height: 24px;width: 24px;" src="@/assets/noticeicon.png" fit="cover" />
                        </div>
                        <el-carousel height="34px" v-if="systemNotice.length > 0" indicator-position="none"
                            style="width: 100%;" direction="vertical" :autoplay="true">
                            <el-carousel-item v-for="(item, k) in systemNotice" :key="k"
                                style="background-color: #f9e79f;">
                                <p class="ellipsis-txt" @click="gotoDetialNotice(item)"
                                    style="font-size: 16px;color: #000;line-height: 34px;margin-left: 10px;">【{{
                                        item.title }}】：{{ item.summary }}</p>
                            </el-carousel-item>
                        </el-carousel>
                    </section>
                </el-col>
            </el-row>
        </div>
        <section v-if="data.indexTitle">
            <div style="width: 1000px;margin: 0 auto;">
                <div style="display: flex;flex-direction: column;align-items: start;margin-top: 15px;">
                    <span style="font-weight: bold;font-size: 21px;color: #006400;line-height: 18px;">{{ data.indexTitle
                        }}</span>
                    <el-divider />
                    <el-row :gutter="0">
                        <el-col :span="10">
                            <section style="height: 380px;">
                                <el-carousel trigger="click" indicator-position="none" height="380px">
                                    <el-carousel-item v-for="(v, k) in data.indexList" :key="k">
                                        <el-image :src="v.cover" fit="cover" @click="gotoDetial1(v)" style="cursor: pointer;width: 100%; 
                                            height: 380px;position: relative;" />
                                        <div
                                            style="position: absolute;bottom: 0;left: 0;right: 0;background-color: #000; opacity: 0.8;height: 30px;">
                                            <span class="line1"
                                                style="font-size: 16px;line-height: 30px;color: #fff;padding: 0 20px;max-width: 360px;">
                                                {{ v.title }}
                                            </span>
                                        </div>
                                    </el-carousel-item>
                                </el-carousel>
                            </section>
                        </el-col>
                        <el-col :span="14">
                            <el-row>
                                <el-col :span="24">
                                    <section style="height: 380px;overflow: auto;margin-left: 25px;">
                                        <div @click="gotoDetial(v)" v-for="(v, k) in data.indexList" :key="k"
                                            v-show="k != 1" class="personal-info-li"
                                            style="cursor: pointer;display: flex;flex-direction: column;align-items: start;margin-bottom: 10px;">
                                            <div
                                                style="display: flex;justify-content: space-between;width: -webkit-fill-available;">
                                                <p class="personal-info-li-title font15 line1"
                                                    style="font-weight: 400;font-size: 16px;color: #222226;line-height: 22px;text-align:left">
                                                    {{ v.title }}</p>
                                                <span
                                                    style="font-weight: 400;color: #999999;font-size: 14px;line-height: 22px;min-width: 180px;text-align: right;">
                                                    {{ v.createdAt }}</span>
                                            </div>
                                            <div style="width: -webkit-fill-available;">
                                                <p class="personal-info-li-title font15 line1"
                                                    style="font-weight: 400;font-size: 14px;color: #999999;line-height: 22px;text-align:left">
                                                    {{ v.summary }}</p>
                                            </div>
                                        </div>
                                    </section>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </div>
                <div style="display: flex;flex-direction: column;align-items: start;margin-top: 15px;">
                    <span style="font-weight: bold;font-size: 21px;color: #006400;line-height: 18px;">交流论坛</span>
                    <el-divider />
                    <el-row>
                        <el-col :span="24" style="margin: 10px 0;">
                            <span v-for="(v, k) in luntantab.bbsTypes" @click="getLuntan(v.id, v)" :key="k" style="padding: 5px 20px;font-size: 18px;
                                line-height: 22px;color: #fff;border-radius: 5px;margin-right:10px;"
                                :style="{ background: v.id == index ? '#369730' : '#006400' }">
                                {{ v.name }}
                            </span>
                        </el-col>
                        <el-col :span="24" style="margin: 20px 0;" v-if="luntanlist.length > 0">
                            <section style="height: 380px;overflow: auto;margin-left: 25px;">
                                <div @click="gottiezi(v)" v-for="(v, k) in luntanlist" :key="k" class="personal-info-li"
                                    style="cursor: pointer;display: flex;flex-direction: column;align-items: start;margin-bottom: 15px;">
                                    <div style="display: flex;justify-content: flex-start;">
                                        <div style="margin-right: 15px;">
                                            <el-image :src="v.user.avatar" fit="cover"
                                                style="width:64px; height: 64px;border-radius: 50%;" />
                                        </div>
                                        <div>
                                            <div
                                                style="display: flex;justify-content: space-between;width: -webkit-fill-available;">
                                                <span style="font-size: 18px;">{{ v.user.nickname }}</span>
                                                <span></span>
                                            </div>
                                            <div>
                                                <p class="personal-info-li-title font15 line1"
                                                    style="font-weight: 400;font-size: 16px;color: #222226;line-height: 22px;text-align:left">
                                                    {{ v.title }}</p>
                                            </div>
                                            <div style="width: -webkit-fill-available;">
                                                <p class="personal-info-li-title font15 line5"
                                                    style="font-weight: 400;font-size: 14px;color: #999999;line-height: 22px;text-align:left">
                                                    {{ v.summary }}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </section>
                        </el-col>
                    </el-row>
                </div>
                <div style="display: flex;flex-direction: column;align-items: start;margin-top: 15px;">
                    <span style="font-weight: bold;font-size: 21px;color: #006400;line-height: 18px;">{{
                        excitingTextureInfo.indexTitle }}</span>
                    <el-divider />
                    <el-row>
                        <el-col :span="6" style="margin: 10px 0;" v-for="(v, k) in excitingTextureInfo.indexList"
                            :key="k">
                            <el-image @click="gotoDetial1(v)" :src="v.cover" fit="cover"
                                style="cursor: pointer;padding:0 5px 5px 5px; " />
                        </el-col>
                    </el-row>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    data() {
        return {
            index: null,
            data: {},
            luntantab: {},
            systemNotice: [],
            luntanlist: [],
            excitingTextureInfo: {},
            bannerList: [{
                imgUrl: require("@/assets/img/banner.png")
            }],
        }
    },
    created() {
        let that = this;
        // that.crud.get("/index-article/index/content/v2").then(res => {
        that.crud.get("/index-article/index/content/v2").then(res => {
            that.data = res.data.data.newsTrends;
            that.luntantab = res.data.data.bbsInfo;
            that.systemNotice = res.data.data.systemNotice.list;
            that.excitingTextureInfo = res.data.data.excitingTextureInfo;
            if (that.luntantab.bbsTypes.length > 0) {
                that.getLuntan(that.luntantab.bbsTypes[0].id, that.luntantab.bbsTypes[0])
            }
        })
        // })


    },
    methods: {
        getLuntan(id, v) {
            if (v.name == '更多') {
                window.open(v.url, '_blank');
                return
            } else {
                this.index = id
                this.crud.get("/topic/topics/v2", { nodeId: id }).then(res => {
                    this.luntanlist = res.data.data.results;
                })
            }

        },
        gotoDetial(obj) {
            // obj。url
            const routeUrl = this.$router.resolve(`/detial/index/${obj.id}`).href;
            window.open(routeUrl, '_blank')
        },
        gotoDetial1(obj) {
            // obj。url
            const routeUrl = this.$router.resolve(`/detial/index/${obj.id}`).href;
            window.open(routeUrl, '_blank')
        },
        gotoDetialNotice(obj) {
            const routeUrl = this.$router.resolve(`/noticeDetial/index/${obj.id}`).href;
            window.open(routeUrl, '_blank')
        },
        gottiezi(obj) {
            // obj。url
            window.open(obj.url, '_blank');
        },

    }
}
</script>

<style scoped>
.el-carousel__item h3 {
    display: flex;
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.el-divider--horizontal {
    margin: 10px 0;
    background-color: #006400;
}

.el-row {
    margin: 0px !important;
    width: 100%;
}

.ellipsis-txt {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 960px;
}

.personal-info-box {
    overflow: hidden;

    .personal-info-ul {
        list-style: none;

        .personal-info-li {
            padding-bottom: 10px;

            .personal-info-li-title {
                display: inline-block;
                color: var(--el-text-color-secondary);
                text-decoration: none;
            }

            & a:hover {
                color: var(--el-color-primary);
                cursor: pointer;
            }
        }
    }

    .personal-edit-title {
        position: relative;
        padding-left: 10px;
        color: var(--el-text-color-regular);
        line-height: 22px;

        &::after {
            content: '';
            width: 4px;
            height: 18px;
            line-height: 22px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: var(--el-color-primary);
            border-radius: 2px;
        }
    }
}

.line1 {
    white-space: nowrap;
    /* 确保文本在一行内显示 */
    overflow: hidden;
    /* 超出容器部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}

.line5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
</style>